<template>
  <div class="icons">
    <swiper :options="swiperOption">

      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-image-content" :src='item.imgUrl'>
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>

    </swiper>
  </div>
</template>

<script>
    export default {
        name: "HomeIcons",
        props:{
          list:Array
        },
      data(){
          return{
            swiperOption:{
              autoplay: false
            }
          }
      },
      /*计算属性是根据其他的一些属性计算出来生成的一组新的结果，自带缓存机制且语法较简单*/
      computed:{
        pages(){
          const pages=[]
          this.list.forEach((item,index)=>{
            const page=Math.floor(index/8)
            if (!pages[page]){
              pages[page]=[]
            }
            pages[page].push(item)
          })
          return pages;
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "../../../assets/styles/varibles.styl"
  @import "../../../assets/styles/mixins.styl"
  .icons >>> .swiper-container
    height 0
    padding-bottom 50%
  .icons
    overflow hidden
    height 0
    padding-bottom 50%
    .icon
      float left
      width 25%
      height 0
      padding-bottom 25%
      position relative
      overflow hidden
      .icon-img
        top 0
        left 0
        right 0
        bottom .44rem/*也就是22px*/
        position absolute
        box-sizing border-box
        padding .1rem
        .icon-image-content
          height 100%
          display block
          margin 0 auto
      .icon-desc
        left 0
        right 0
        bottom 0
        height .44rem
        line-height .44rem
        color $darkTextColor
        text-align center
        position absolute
        ellipsis()/*实现文字太长，后面隐藏的部分使用...来代替*/
</style>
